<template>
  <div class="container">
    <header>
      <h1>房产资讯</h1>
    </header>
    <div class="ad">
      <div v-if="banners" v-swiper:mySwiper="swiperOption">
        <ul class="swiper-wrapper">
          <li class="swiper-slide" v-for="banner in banners" :key="banner.nid">
            <p>
              最新资讯
              <span>{{banner.pubtime}}</span>
            </p>
            <h1>{{banner.title}}</h1>
            <p>{{banner.desc}}</p>
            <img :src="banner.imgPath1" />
          </li>
        </ul>
      </div>
    </div>
    <section class="content">
      <h1>
        热门资讯
        <span>
          <router-link to="/information">
            <a href="javascript:;">更多&gt;</a>
          </router-link>
        </span>
      </h1>
      <ul class="case">
        <li v-for="item in hotNews" :key="item.nid">
          <a href="#">
            <img :src="item.imgPath2" class="img-left fl" />
            <div class="text fr">
              <p>{{item.desc}}</p>
              <div>包图新闻</div>
              <span>
                <img src="images/icon1.jpg" />
                {{item.comments}}
              </span>
              <span>
                <img src="images/icon2.jpg" />
                {{item.likes}}
              </span>
            </div>
          </a>
        </li>
        <div class="loadmore" @click="loadMore">...加载更多</div>
      </ul>
    </section>
  </div>
</template>

<script>
import { getSayBanner, getHotNews } from "../network/say";
export default {
  name: "",
  data() {
    return {
      // 定义变量
      swiperOption: {
        loop: true,
        autoplay: {
          delay: 2000,
          stopOnLastSlide: false,
          disableOnInteraction: false,
        },
        slidesPerView: "auto",
        centeredSlides: true,
        // slidesPerView: 1,
      },
      banners: [],
      hotNews: [],
      hotNewsAll: [],
      page: 1,
    };
  },
  methods: {
    loadMore() {
      if (this.hotNews.length < this.hotNewsAll.length) {
        this.page++;
        this.hotNews = this.hotNewsAll.slice(0, 3 * this.page);
      }
    },
  },
  mounted() {
    getSayBanner("/data/news_data.json")
      .then((res) => {
        if (res.data.code == 200) {
          this.banners = res.data.newList;
        } else {
          return "error";
        }
      })
      .catch(() => console.log("err"));
    getHotNews("/data/news_data.json")
      .then((res) => {
        let data = res.data;
        if (data.code == 200) {
          this.hotNewsAll = data.hotList;
          this.hotNews = this.hotNewsAll.slice(0, 3);
        } else {
          return "error";
        }
      })
      .catch(() => console.log("err"));
  },
};
</script>
<style src="../assets/css/info.css" scoped></style>
<style scoped>
.loadmore {
  text-align: center;
  font-size: 0.3rem;
  cursor: pointer;
}
</style>
